<!-- 地址管理 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig" ref="addressTable">
        <template #btns="{ deleteAll }">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增地址
          </el-button>
          <el-button type="danger" @click="deleteAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button :icon="Edit" text size="small" class="btn" @click="uploadEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            :icon="Delete"
            text
            size="small"
            class="btn"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </ELTable>

      <!-- 添加 -->
      <addressDialog v-if="dialogVisible" :listParams="listParams" @close="handelClose" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { addressList, addressDel, addressDelAll } from "@/api/care/address/address";
import { Edit, Delete } from "@element-plus/icons-vue";
import addressDialog from "@/components/care/addressAdd.vue";
import { addressListData } from "@/api/care/address/type";

const dialogVisible = ref(false);

let listParams = reactive<addressListData>({
  id: 0,
  companyId: 0,
  name: "",
  qrcode: "",
});

// 添加
const add = () => {
  listParams = {
    id: 0,
    name: "",
    qrcode: "",
  };
  dialogVisible.value = true;
};

// 编辑
const uploadEdit = (row: addressListData) => {
  // console.log(row);
  listParams = row;
  dialogVisible.value = true;
};

// 关闭弹框
const addressTable = ref();
const handelClose = () => {
  dialogVisible.value = false;
  addressTable.value.getData();
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: addressList,
  delete: addressDel,
  deleteAll: addressDelAll,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "name",
      label: "巡查地点",
    },
    {
      prop: "qrcode",
      label: "二维码",
      image: true,
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
    },
  ],
});
</script>

<style lang="less" scoped>
.btn {
  width: 40px;
  color: rgb(64, 158, 255);
  margin-right: 10px;
}

.btn:last-child {
  color: rgb(245, 108, 127);
}
</style>
